<script setup lang="ts">
  import { Graph } from '@antv/x6';
  import { Stencil } from '@antv/x6-plugin-stencil';
  import { onMounted, ref } from 'vue';
  import { createGraph } from '@/views/flow/manager/util/flowGraph';
  import { createStencil } from '@/views/flow/manager/util/flowStencil';
  import { addFlowChart, queryFlowChart } from '@/api/flow/flow';
  import { useRoute } from 'vue-router';
  import { useDrawer } from '@/components/Drawer';
  import FlowControl from './flow-control.vue';
  import FlowNodeDrawer from './flow-node-drawer.vue';

  defineOptions({ name: 'FlowGraph' });
  const [registerDrawer, { openDrawer }] = useDrawer();
  const route = useRoute();
  const flowId = ref(route.params?.id);
  const graph = ref<Graph>();
  const stencil = ref<Stencil>();
  onMounted(async () => {
    // 创建画布及相关操作
    graph.value = createGraph(document.getElementById('graph-container'));
    // 创建组件面板
    stencil.value = createStencil(graph.value, document.getElementById('stencil'));
    // 初始化数据
    const data = await queryFlowChart(flowId.value);
    if (data !== null) {
      graph.value.fromJSON(data);
    }
    //绑定节点 鼠标双击事件
    graph.value.on('node:dblclick', ({ cell }) => {
      // cell 基类对象 view 视图对象
      // 目标数据logic
      console.log(cell.data);
      console.log(cell);
      const record: Recordable = {
        nodeId: cell.id,
        nodeType: cell.attrs.text.text,
        nodeName: cell.attrs.text.text,
      };
      openDrawer(true, {
        record,
        isUpdate: true,
      });
    });
  });
  async function submit() {
    await addFlowChart({ flowId: flowId.value, flowJsons: graph.value?.toJSON()['cells'] });
  }
  function handleSuccess() {
    console.log('成功');
  }
</script>

<template>
  <div class="approve-container">
    <FlowControl class="control" size="small" @submit="submit" />
    <div id="container" class="viewContainer">
      <div id="stencil"></div>
      <div id="graph-container"></div>
    </div>
  </div>
  <FlowNodeDrawer @register="registerDrawer" @success="handleSuccess" />
</template>

<style lang="less">
  .approve-container {
    position: relative;
    height: 100%;
    .control {
      position: absolute;
      top: 10px;
      right: 50px;
      z-index: 2;
    }
    .viewContainer {
      height: 100%;
    }
  }
  #container {
    width: 100%;
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    border: 1px solid #dfe3e8;
  }
  #stencil {
    width: 200px;
    height: 100%;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }
  #graph-container {
    width: calc(100% - 180px);
    height: 100%;
  }
  .x6-widget-stencil {
    background-color: #fff;
  }
  .x6-widget-stencil-title {
    background-color: #fff;
  }
  .x6-widget-stencil-group-title {
    background-color: #fff !important;
  }
  .x6-widget-transform {
    margin: -1px 0 0 -1px;
    padding: 0;
    border: 1px solid #239edd;
  }
  .x6-widget-transform > div {
    border: 1px solid #239edd;
  }
  .x6-widget-transform > div:hover {
    background-color: #3dafe4;
  }
  .x6-widget-transform-active-handle {
    background-color: #3dafe4;
  }
  .x6-widget-transform-resize {
    border-radius: 0;
  }
  .x6-widget-selection-inner {
    border: 1px solid #239edd;
  }
  .x6-widget-selection-box {
    opacity: 0;
  }
</style>
